<template>
  <div class="all" p-5>
    <div class="all-top">
      <div class="all-top-tittle">案件处理</div>
    </div>
    <SpotInfo :id="route.query.id" :queryType="2" :title="false"></SpotInfo>
    <div class="penaltyInfo-body">
      <div class="penaltyInfo-body-box">
        <div class="penaltyInfo-body-box-tittle">
          <div class="penaltyInfo-body-box-tittle-left"></div>
          <div class="penaltyInfo-body-box-tittle-right">处罚信息</div>
        </div>
        <div class="penaltyInfo-body-box-info">
          <a-form
            ref="formRef"
            :model="formState"
            :rules="rules"
            :label-col="labelCol"
            :wrapper-col="wrapperCol"
          >
            <a-row :gutter="24">
              <a-col class="gutter-row" :span="7">
                <a-form-item label="罚款金额" name="penaltyAmount">
                  <a-input
                    v-model:value="formState.penaltyAmount"
                    :controls="false"
                    addon-after="元"
                    :maxlength="8"
                    autocomplete="off"
                    onkeyup="value=value.match(/\d+\.?\d{0,2}/,'')"
                    placeholder="请输入罚款金额"
                  />
                </a-form-item>
              </a-col>
            </a-row>
          </a-form>
          <div style="width: 30%">
            <BookCreate
              :type="2"
              :caseId="route.query.id"
              :url="dccffileInfoData.oldFileUrl"
              :newFileUrl="dccffileInfoData.newFileUrl"
              :caseFileId="dccffileInfoData.id"
              @getBookUrl="getBookUrl"
            />
          </div>
          <div style="width: 30%">
            <BookCreate
              :type="16"
              :caseId="route.query.id"
              :url="sdhzfileInfoData.oldFileUrl"
              :newFileUrl="sdhzfileInfoData.newFileUrl"
              :caseFileId="sdhzfileInfoData.id"
              @getBookUrl="getBookUrl"
            />
          </div>
          <div style="width: 30%">
            <BookCreate
              :type="22"
              :caseId="route.query.id"
              :url="jnpzfileInfoData.oldFileUrl"
              :newFileUrl="jnpzfileInfoData.newFileUrl"
              :caseFileId="jnpzfileInfoData.id"
              @getBookUrl="getBookUrl"
            />
          </div>
        </div>
      </div>
    </div>
    <div class="bottomBox"></div>
    <div class="bottomBtns" style="z-index: 3">
      <a-space :size="12">
        <a-button size="large" @click="cacel">取消</a-button>
        <a-button size="large" type="primary" @click="onSubmit">提交</a-button>
      </a-space>
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { createVNode, onMounted, reactive, ref } from 'vue';
  import SpotInfo from '../spotInfo.vue';
  import router from '@/router';
  import { useRoute } from 'vue-router';
  import { Modal, message } from 'ant-design-vue';
  import { useTabsViewStore } from '@/store/modules/tabsView';
  import { caseDetail } from '@/api/administrativePenalty/case-management';
  import { dealCase } from '@/api/administrativePenalty/spot-punishment';
  import type { Rule } from 'ant-design-vue/es/form';

  const tabsViewStore = useTabsViewStore();
  const route = useRoute();

  const goTask = () => {
    router.push({
      path: '/supervision/task-view',
      query: { id: penaltyData.value.taskId },
    });
  };

  //当场处罚决定书
  const dccffileInfoData = ref({
    oldFileUrl: '',
    newFileUrl: '',
    id: '',
  });

  //送达回证
  const sdhzfileInfoData = ref({
    oldFileUrl: '123',
    newFileUrl: '',
    id: '',
  });

  //缴纳凭证
  const jnpzfileInfoData = ref({
    oldFileUrl: '123',
    newFileUrl: '',
    id: '',
  });

  const caseDetailApi = async () => {
    const data = await caseDetail(route.query.id as any, 2);
    penaltyData.value = data;

    if (penaltyData.value.fileInfoList) {
      if (penaltyData.value.fileInfoList.filter((item) => item.fileType == 20).length) {
        dccffileInfoData.value = penaltyData.value.fileInfoList.filter(
          (item) => item.fileType == 20,
        )[0];
      } else {
        dccffileInfoData.value = {
          oldFileUrl: '',
          newFileUrl: '',
          id: '',
        };
      }
      if (penaltyData.value.fileInfoList.filter((item) => item.fileType == 16).length) {
        sdhzfileInfoData.value = penaltyData.value.fileInfoList.filter(
          (item) => item.fileType == 16,
        )[0];
      } else {
        sdhzfileInfoData.value = {
          oldFileUrl: '123',
          newFileUrl: '',
          id: '',
        };
      }
      if (penaltyData.value.fileInfoList.filter((item) => item.fileType == 17).length) {
        jnpzfileInfoData.value = penaltyData.value.fileInfoList.filter(
          (item) => item.fileType == 17,
        )[0];
      } else {
        jnpzfileInfoData.value = {
          oldFileUrl: '123',
          newFileUrl: '',
          id: '',
        };
      }
    }
  };

  const getBookUrl = (data) => {
    if (data.code == 0) {
      caseDetailApi();
    }
  };

  const cacel = () => {
    router.push({
      path: '/administrative-penalty/administrative-penalty/spot-punishment',
    });
  };

  const formRef = ref();
  const labelCol = {
    span: 5,
  };
  const wrapperCol = {
    span: 20,
  };

  const formState = reactive({
    penaltyAmount: undefined, //罚款金额；单位：元
  });

  const validatePenaltyAmount = async (_rule: Rule, value: any) => {
    if (value === undefined || value == '') {
      let message = '请输入罚款金额';
      return Promise.reject(message);
    } else if (value == 0) {
      return Promise.reject('罚款金额请不低于0元');
    } else {
      if (
        (penaltyData.value?.placeInfo.partyType == 0 ||
          penaltyData.value?.placeInfo.partyType == 2) &&
        value > 200
      ) {
        return Promise.reject('罚款金额请不超过200元');
      } else if (
        (penaltyData.value?.placeInfo.partyType == 1 ||
          penaltyData.value?.placeInfo.partyType == 3) &&
        value > 3000
      ) {
        return Promise.reject('罚款金额请不超过3000元');
      } else {
        return Promise.resolve();
      }
    }
  };

  const rules = {
    penaltyAmount: [
      {
        required: true,
        validator: validatePenaltyAmount,
        trigger: 'bulr',
      },
    ],
  } as any;

  const penaltyData = ref();

  const onSubmit = async () => {
    formRef.value
      .validate()
      .then(async () => {
        if (penaltyData.value?.fileInfoList.length >= 3) {
          if (penaltyData.value?.penaltyAmount != '') {
            formState?.penaltyAmount == penaltyData.value?.penaltyAmount;
          }
          Modal.confirm({
            title: '提示',
            content: createVNode('div', { style: 'color:#666666' }, '确定结束案件？'),
            async onOk() {
              if (
                dccffileInfoData.value.newFileUrl == '' ||
                sdhzfileInfoData.value.id == '' ||
                jnpzfileInfoData.value.id == '' ||
                dccffileInfoData.value.id == ''
              ) {
                setTimeout(() => {
                  Modal.destroyAll();
                }, 200);
              }
              let data = {
                id: route.query.id,
                penaltyAmount: formState?.penaltyAmount,
              };
              const res = await dealCase(data);

              if (res.code == 0) {
                message.success('提交成功！');
                tabsViewStore.closeCurrentTabToUrl(
                  route,
                  '/administrative-penalty/administrative-penalty/spot-punishment',
                );
              }
            },
            onCancel() {},
            class: 'submitBox',
          });
        } else {
          if (dccffileInfoData.value.id == '') {
            message.error('当场行政处罚决定文书未制作！');
          } else if (dccffileInfoData.value.id != '' && dccffileInfoData.value.newFileUrl == '') {
            message.error('当场行政处罚决定文书未上传！');
          } else if (sdhzfileInfoData.value.id == '') {
            message.error('送达回证文书未上传！');
          } else if (jnpzfileInfoData.value.id == '') {
            message.error('缴纳凭证文书未上传！');
          }
        }
      })
      .catch((error) => {
        console.log('error', error);
      });
  };

  onMounted(async () => {
    caseDetailApi();
    if (route.query.id) {
      const data = await caseDetail(route.query.id as any, 2);
      penaltyData.value = data;
      formState.penaltyAmount = penaltyData.value.penaltyAmount;
    }
  });
</script>
<style lang="less" scoped>
  .all {
    background-color: #ffffff;

    &-top {
      &-tittle {
        padding: 0px 0 16px 0;
        font-size: 18px;
        font-weight: 700;
        line-height: 26px;
        color: rgba(68, 68, 68, 1);

        border-bottom: 1px solid rgba(240, 240, 240, 1);
      }
    }

    .penaltyInfo {
      &-body {
        &-box {
          margin-bottom: 16px;
          &-tittle {
            display: flex;
            align-items: center;
            padding: 13px 0 13px 0;
            &-left {
              border: 1px solid #0f53ac;
              margin-right: 7px;
              border-radius: 4px;
              height: 14px;
            }

            &-right {
              font-size: 16px;
              font-weight: 400;
              line-height: 24px;
              color: rgba(68, 68, 68, 1);
            }
          }

          &-info {
            :global(.ant-descriptions-item-label) {
              width: 160px;
            }
          }
        }
      }
    }
    .noData {
      height: 64px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
</style>
